{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>新建合同</h2>
            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回列表
            </a>
        </div>

        <div class="card">
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="pro_name" class="form-label">项目名称</label>
                            <input type="text" class="form-control" id="pro_name" name="pro_name" required>
                            <div class="invalid-feedback">
                                请输入项目名称
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="my_comma" class="form-label">我方公司</label>
                            <input type="text" class="form-control" id="my_comma" name="my_comma" required>
                            <div class="invalid-feedback">
                                请输入我方公司名称
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="ven_name" class="form-label">供应商名称</label>
                            <input type="text" class="form-control" id="ven_name" name="ven_name" required>
                            <div class="invalid-feedback">
                                请输入供应商名称
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="item_sup" class="form-label">供应物品</label>
                            <input type="text" class="form-control" id="item_sup" name="item_sup" required>
                            <div class="invalid-feedback">
                                请输入供应物品
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="people" class="form-label">负责人</label>
                            <input type="text" class="form-control" id="people" name="people" required>
                            <div class="invalid-feedback">
                                请输入负责人
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="money" class="form-label">金额</label>
                            <input type="number" class="form-control" id="money" name="money" step="0.01" required>
                            <div class="invalid-feedback">
                                请输入合同金额
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="date" class="form-label">日期</label>
                            <input type="date" class="form-control" id="date" name="date" required>
                            <div class="invalid-feedback">
                                请选择日期
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="cate" class="form-label">类别</label>
                            <select class="form-select" id="cate" name="cate" required>
                                <option value="">请选择类别</option>
                                <option value="对公">对公</option>
                                <option value="对私">对私</option>
                            </select>
                            <div class="invalid-feedback">
                                请选择类别
                            </div>
                        </div>
                        <div class="col-md-8">
                            <label for="note" class="form-label">备注</label>
                            <textarea class="form-control" id="note" name="note" rows="2"></textarea>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="files" class="form-label">上传文件</label>
                        <input type="file" class="form-control" id="files" name="files" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png">
                        <div class="form-text">
                            支持的文件格式：PDF、Word文档、图片<br>
                            PDF和Word文档将自动转换为图片以便在线查看
                        </div>
                    </div>

                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i> 保存合同
                        </button>
                        <a href="{{ url_for('index') }}" class="btn btn-secondary">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
// 表单验证
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()

// 金额输入验证
document.getElementById('money').addEventListener('input', function() {
    if (this.value < 0) {
        this.setCustomValidity('金额不能为负数');
    } else {
        this.setCustomValidity('');
    }
});

// 日期验证
document.getElementById('date').addEventListener('change', function() {
    var today = new Date();
    var selectedDate = new Date(this.value);
    
    if(selectedDate > today) {
        this.setCustomValidity('日期不能超过今天');
    } else {
        this.setCustomValidity('');
    }
});
</script>
{% endblock %}
{% endblock %} 